﻿@page "/tests/components"
@using System.Collections.ObjectModel

<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Select List</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldLabel ColumnSize="ColumnSize.Is2">Select Value</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is10">
                        <SelectList TItem="MySelectModel"
                                    TValue="int"
                                    Data="@myDdlData"
                                    TextField="@(( item ) => item.MyTextField)"
                                    ValueField="@((item) => item.MyValueField)"
                                    SelectedValue="@selectedListValue"
                                    SelectedValueChanged="@MyListValueChangedHandler"
                                    DefaultItemText="Choose your country" />
                    </FieldBody>
                </Field>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldBody ColumnSize="ColumnSize.Is10.Is2.WithOffset">
                        Selected value: @selectedListValue
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Autocomplete</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldLabel ColumnSize="ColumnSize.Is2">Select Value</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is10">
                        <Autocomplete TItem="MySelectModel"
                                      TValue="string"
                                      Data="@myDdlData"
                                      TextField="@(( item ) => item.MyTextField)"
                                      ValueField="@(( item ) => item.MyTextField)"
                                      SelectedValue="@selectedSearchValue"
                                      SelectedValueChanged="@MySearchHandler"
                                      @bind-SelectedText="selectedAutoCompleteText"
                                      Placeholder="Search..."
                                      Filter="AutocompleteFilter.StartsWith"
                                      FreeTyping="true"
                                      CustomFilter="@(( item, searchValue ) => item.MyTextField.IndexOf( searchValue, 0, StringComparison.CurrentCultureIgnoreCase ) >= 0 )">
                            <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent>
                        </Autocomplete>
                    </FieldBody>
                </Field>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldBody ColumnSize="ColumnSize.Is10.Is2.WithOffset">
                        Selected search value: @selectedSearchValue
                    </FieldBody>
                    <FieldBody ColumnSize="ColumnSize.Is10.Is2.WithOffset">
                        Selected text value: @selectedAutoCompleteText
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Dropdown List</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldLabel ColumnSize="ColumnSize.Is2">Select Value</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is10">
                        <DropdownList TItem="MySelectModel"
                                      TValue="int"
                                      Data="@myDdlData"
                                      TextField="@(( item ) => item.MyTextField)"
                                      ValueField="@(( item ) => item.MyValueField)"
                                      SelectedValue="@selectedDropValue"
                                      SelectedValueChanged="@MyDropValueChangedHandler"
                                      Color="Color.Primary">
                            Select item
                        </DropdownList>
                    </FieldBody>
                </Field>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldBody ColumnSize="ColumnSize.Is10.Is2.WithOffset">
                        Selected value: @selectedDropValue
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Repeater</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldLabel ColumnSize="ColumnSize.Is6">
                        <Buttons>
                            <Button Color="Color.Primary" Clicked="@(() => items.Add( items.Count + 1 ) )">Add</Button>
                            <Button Color="Color.Warning" Disabled="@(items.Count == 0)" Clicked="@(() => items.RemoveAt( items.Count - 1 ))">Remove</Button>
                            <Button Color="Color.Danger" Clicked="@(() => items.Clear())">Clear</Button>
                            <Button Color="Color.Secondary" Disabled="@(items.Count == 0)" Clicked="ShuffleList">Shuffle</Button>
                        </Buttons>
                    </FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is6">
                        <Dropdown>
                            <DropdownToggle Color="Color.Primary">
                                Updating dropdown
                            </DropdownToggle>
                            <DropdownMenu>
                                <Repeater Items="@items">
                                    <DropdownItem>@context</DropdownItem>
                                </Repeater>
                            </DropdownMenu>
                        </Dropdown>
                    </FieldBody>
                </Field>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldBody ColumnSize="ColumnSize.Is12">
                        <ul>
                            <Repeater Items="@items">
                                <li style="@GetColor( context )">@context</li>
                            </Repeater>
                        </ul>
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
</Row>

@code{
    public class MySelectModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    static string[] Countries = { "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan", "Belarus", "Belgium", "Bosnia & Herzegovina", "Bulgaria", "Croatia", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France", "Georgia", "Germany", "Greece", "Hungary", "Iceland", "Ireland", "Italy", "Kosovo", "Latvia", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Malta", "Moldova", "Monaco", "Montenegro", "Netherlands", "Norway", "Poland", "Portugal", "Romania", "Russia", "San Marino", "Serbia", "Slovakia", "Slovenia", "Spain", "Sweden", "Switzerland", "Turkey", "Ukraine", "United Kingdom", "Vatican City" };
    IEnumerable<MySelectModel> myDdlData = Enumerable.Range( 1, Countries.Length ).Select( x => new MySelectModel { MyTextField = Countries[x - 1], MyValueField = x } );

    int selectedListValue { get; set; }
    int selectedDropValue { get; set; } = 2;
    string selectedSearchValue { get; set; }
    string selectedAutoCompleteText { get; set; }
    ObservableCollection<int> items { get; } = new( Enumerable.Range( 1, 4 ) );
    Random random = new();

    void MyListValueChangedHandler( int newValue )
    {
        selectedListValue = newValue;
    }

    void MyDropValueChangedHandler( int newValue )
    {
        selectedDropValue = newValue;
    }

    void MySearchHandler( string newValue )
    {
        selectedSearchValue = newValue;
    }

    private void ShuffleList()
    {
        var maxIndex = items.Count - 1;

        if ( maxIndex == -1 )
            return;

        var orgPos = random.Next( maxIndex );
        var newPos = random.Next( maxIndex );

        items.Move( orgPos, newPos );
    }

    private static string GetColor( int number )
    {
        const string letters = "0123456789ABCDEF";

        var color = "";

        for ( var i = 0; i < 6; i++ )
        {
            color += letters[(3 * number + i) % letters.Length];
        }

        return $"color: #{color}";
    }
}